<template>
	<view>
		<view class="list-item">
			<image :src="item.image" mode="" style="width: 100%;"></image>
			<view class="right">
				<view class="title">{{ item.title }}</view>
				<view class="desc">{{ item.desc }}</view>
				<view class="price">{{ item.price }}</view>
			</view>
		</view>

		<div class="btm">
			<uni-icons v-if="isCollect(item)" color="red" type="star-filled" size="30"
				@click="handleCollect(item)"></uni-icons>
			<uni-icons v-else type="star" size="30" @click="handleCollect(item)"></uni-icons>
			<navigator url="/pages/collect/collect">
				<button>我的收藏</button>
			</navigator>
		</div>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	const db = uniCloud.database();
	export default {
		data() {
			return {
				id: '',
				item: {}
			}
		},
		computed: {
			...mapGetters('collect', ['isCollect'])
		},
		methods: {
			...mapMutations('collect', ['switchCollect']),
			async getDetail() {
				const resp = await db.collection('list').doc(this.id).get({
					getOne: true
				})
				this.item = resp.result.data;

			},
			setTitle(title) {
				uni.setNavigationBarTitle({
					title: title
				})
			},
			handleCollect(item) {
				if (this.isCollect(item)) {
					uni.showToast({
						title: '取消收藏',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '加入收藏',
						icon: 'none'
					})
				}
				this.switchCollect(item)
			}
		},
		onLoad({
			id,
			title
		}) {
			this.id = id;
			this.setTitle(title)
			this.getDetail();
		}
	}
</script>

<style scoped lang="scss">
	.btm {
		bottom: 0;
		position: fixed;
	}
</style>